<template>
	<view class="alarm">
		<view class="alarm-box">
      <view class="alarm-box-title">
        <view class="alarm-box-rect"></view>
        <view class="alarm-box-text">未处理告警统计</view>
      </view>
      <view class="alarm-icon"></view>
      <view class="alarm-item-list">
        <view class="alarm-item">
          <view class="alarm-value">滞后:{{ alarmData.productionDelay }}</view>
          <view class="alarm-name">生产进度滞后</view>
        </view>
        <view class="alarm-item">
          <view class="alarm-value">低于:{{ alarmData.inventoryShortage}}</view>
          <view class="alarm-name">库存不足</view>
        </view>
        <view class="alarm-item">
          <view class="alarm-value">数量:{{ alarmData.equipmentFailure}}</view>
          <view class="alarm-name">设备故障</view>
        </view>
      </view>
    </view>
    <view class="alarm-title">
      — — 待处理预警 —  —
    </view>
    <div class="alarm-box2">
      <div class="alarm-data">
        <div style="height: 80rpx" v-if="alarmList.length === 0"></div>
        <u-empty v-if="alarmList.length === 0"></u-empty>
        <u-swipe-action
            :show="item.show" :index="index"
            v-for="(item, index) in alarmList" :key="item.id"
            @click="click"
            :options="options"
        >
          <div class="alarm-data-item">
            <div class="alarm-name">{{ item.category }}</div>
            <div class="alarm-content">
              <div class="alarm-desc">{{ item.description }}</div>
              <div class="alarm-date">{{ item.created_time }}</div>
            </div>
          </div>
        </u-swipe-action>
      </div>
    </div>
    <view class="alarm-title black">
      — — 历史预警 —  —
    </view>
    <div class="alarm-box2 alarm-box3">
      <div class="alarm-data">
        <div class="alarm-data-item" v-for="item in alarmListHistory">
          <div class="alarm-name">{{ item.category }}</div>
          <div class="alarm-content">
            <div class="alarm-desc">{{ item.description }}</div>
            <div class="alarm-date">{{ item.created_time }}</div>
          </div>
        </div>
        <div style="height: 80rpx" v-if="alarmListHistory.length === 0"></div>
        <u-empty v-if="alarmListHistory.length === 0"></u-empty>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alarmData: {
          // 生产滞后
          productionDelay: '20%',
          // 库存不足
          inventoryShortage: 1,
          // 设备故障
          equipmentFailure: 1
        },
        alarmList: [
        ],
        alarmListHistory: [
        ],
        options: [
          {
            text: '处理',
            style: {
              backgroundColor: '#007aff'
            }
          },
          {
            text: '删除',1
            style: {
              backgroundColor: '#dd524d'
            }
          }
        ]
			}
		},
    onLoad() {
      this.getList()
    },
		methods: {
      getList() {
        this.$api.getAlarmCount().then(res => {
          console.log(res)
          for (const alarmDataKey in this.alarmData) {
            this.alarmData[alarmDataKey] = res[alarmDataKey]
          }
          this.alarmList = res.waitAlarmList.map(item => {
            return {
              ...item,
              show: false
            }
          })
          this.alarmListHistory = res.alarmListHistory
        })
      },
      click(index, index1) {
        if(index1 == 1) {
          this.$api.deleteAlarm({
            id: this.alarmList[index].id
          }).then(res => {
            this.alarmList.splice(index, 1)
            this.$u.toast(`删除成功`);
          })
        } else {
          this.$api.handleAlarm({
            id: this.alarmList[index].id
          }).then(res => {
            this.alarmList.splice(index, 1)
            this.$u.toast(`处理成功`);
          })
        }
      },
		}
	}
</script>

<style lang="scss">
.alarm {
  height: 100%;
  overflow: auto;
  background-color: #F8F9FD;
  padding: 30rpx;
  .alarm-box2 {
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255,26,0,0.32);
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding: 0 20rpx;
    .alarm-data {
      min-height: 300rpx;
      .alarm-data-item {
        border-bottom: 1px solid #E8E8E8;
        padding: 16rpx 0;
        .alarm-name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 25rpx;
          color: #FF2424;
          line-height: 34rpx;
          text-align: left;
          margin-bottom: 10rpx;
        }
        .alarm-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .alarm-desc {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
          line-height: 34rpx;
          text-align: left;
        }
        .alarm-date {
          margin-left: 20rpx;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          line-height: 24rpx;
          text-align: left;
        }
      }
      .alarm-data-item:last-child {
        border-bottom: none;
      }
    }
  }
  .alarm-box3 {
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(31,150,247,0.34);
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    .alarm-data {
      .alarm-data-item {
        .alarm-name {
          color: #333333;
        }
      }
    }
  }
  .alarm-title {
    padding: 30rpx 0;
    text-align: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 30rpx;
    color: #FF2424;
    line-height: 30rpx;
  }
  .alarm-title.black {
    color: #000000;
  }
  .alarm-box {
    width: 100%;
    background: linear-gradient( 180deg, #FFD9D5 0%, #FFFFFF 100%);
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255,34,34,0.37);
    border-radius: 25rpx 25rpx 25rpx 25rpx;
    position: relative;
    .alarm-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 122rpx;
      height: 95rpx;
      background-image: url("/static/alarm.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: 2;
    }
    .alarm-box-title {
      padding: 20rpx;
      display: flex;
      align-items: center;
      .alarm-box-rect {
        width: 8rpx;
        height: 30rpx;
        background-color: #FF1A00;
        border-radius: 2rpx;
        margin-right: 16rpx;
      }
      .alarm-box-text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        line-height: 53rpx;
      }
    }

    .alarm-item-list {
      padding: 50rpx 20rpx 20rpx 20rpx;
      display: flex;
      align-items: center;
      .alarm-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
        .alarm-name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 25rpx;
          color: #000000;
          line-height: 40rpx;
        }
        .alarm-value {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: bold;
          font-size: 23rpx;
          color: #FF1A00;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }

}
</style>
